<include file="header" />
<body>
<div class="wraper">
    <div class="top">
        <a href="javascript:history.go(-1);" class="iconfont icon-zuo pull-left"></a>
        <span class="pull-left">电费充值</span>
        <a href="{BEESCRM::U('base/dormCharge/chargeLog',array('wechat_id'=>$wechat_id))}" class="pull-left text-right">历史充电</a>
    </div>
    <div class="electric-note tb-mode">
        <div class="tb-cell">
	        <div class="eleInfo">
		        <!--<p class="warnimg">截至{BEESCRM:$uploaddt} 剩余电量</p>
		        <p class="odd">{BEESCRM:$ele}度</p>
		        <p>{BEESCRM:$community_name} {BEESCRM:$building_name} {BEESCRM:$room}</p>-->
	        </div>
        </div>
        <div class="tb-cell search-btn text-right"><a href="{BEESCRM::U('base/dormCharge/query',array('wechat_id'=>$wechat_id))}">电量查询</a></div>
    </div>
    <div class="margin-top">
        <p class="form-box">
            <select id="community_name">
                <option value="0">请选择所在生活区</option>
                <volist name="community" id="vo">
                    <option value="{BEESCRM:$vo.community_id}" <if condition="$vo['community_id'] eq $community_id" >selected="selected"</if>>{BEESCRM:$vo.community_name}</option>
                </volist>
            </select>
            <span class="triangle"></span>
        </p>
        <p class="form-box">
            <select id="building_name">
                <option value="0">请选择楼号</option>
	            <if condition="$building">
		            <volist name="building" id="vo">
			            <option value="{BEESCRM:$vo.building_id}"<if condition="$building_id eq $vo['building_id']">selected="selected"</if>>{BEESCRM:$vo.building_name}</option>
		            </volist>
	            </if>
            </select>
            <span class="triangle"></span>
        </p>
        <p class="form-box">
	        <select id="dorm">
		        <option value="0">请选择寝室</option>
		        <if condition="$dorm">
			        <volist name="dorm" id="vo">
				        <option value="{BEESCRM:$vo.dorm_id}"<if condition="$dorm_id eq $vo['dorm_id']">selected="selected"</if>>{BEESCRM:$vo.dorm_name}</option>
			        </volist>
		        </if>
	        </select>
	        <span class="triangle"></span>
        </p>
    </div>
    <div class="contain-box margin-top">
        <p class="amount">充值金额</p>
        <div class="tab-prize clearfix">
	        <volist name="amount1" id="vo">
		        <span class="option sub-list <if condition="$key eq 0">checked</if>" data-amount="{BEESCRM:$vo}">{BEESCRM:$vo}元</span>
	        </volist>
	        <!-- <notempty name="amount2">
            <p class="option other clearfix">
                <select class="price-box" id="number">
                    <option value="0">其他</option>
	                <volist name="amount2" id="vol">
		                <option value="{BEESCRM:$vol}">{BEESCRM:$vol}元</option>
	                </volist>
                </select>
                <span class="iconfont icon-zuo"></span>
            </p>
	        </notempty> -->
        </div>
    </div>
    <div class="btn-box">
        <a href="javascript:void(0);" class="btn save">立即充值</a>
    </div>
</div>
<include file="commonJS" />
<script>
	$('.scrm-loadding').show();
	$(function(){
		//ajax请求剩余电量信息
		$.ajax({
			url: "/base/dormCharge/getInfo",
			type: "post",
			dataType: 'json',
			async: false,
			success: function (data) {
				if(data.status == 'S'){
					var str = '<p class="warnimg">截至'+data.time+'剩余电量</p>'
							+'<p class="odd">'+data.ele+'度</p>';
				}else{
					var str = '<p class="warnimg">'+data.message+'</p>';
				}
				$('.eleInfo').html(str);
				$('.scrm-loadding').hide();
			}
		});
	});

    $('.tab-prize').on('click','.option',function(){
        if($(this).hasClass('other')){
            $(this).siblings().removeClass('checked');
            $(this).addClass('checked');
        }
        else{
            $(this).toggleClass('checked').siblings().removeClass('checked');
        }
    });

    $('.tab-prize').on('click','.sub-list',function(){
	    var str = '{BEESCRM:$str}';
	    $('.tab-prize #number').html(str);
    });

    /*提交订单*/
    $(document).on('click','.save',function(){
        var dorm = $('#dorm').val();
        var money = $('.checked').data('amount');
        //var money1 = $('#number').val();
        var order_price = 0;

        if(!dorm){
            $.alert('error','请选择寝室');
            return false;
        }

        if(money > 0){
            order_price = money;
        }else{
            $.alert('error','请选择充值金额');
            return false;
        }

        if(order_price == 0){
            $.alert('error','请选择充值金额');
            return false;
        }

        var info = {};
        info.dorm_id = dorm;
        info.charge_price = order_price;
        info.flag = 1;
        $.ajax({
            'url': "/base/dormCharge/index?wechat_id={BEESCRM:$wechat_id}",
            'data': info,
            'dataType':'json',
            'type': 'POST',
            'async': false,
            success: function(data) {
                if (data.status == 'S') {
                    window.location.href=data.url;
                }else{
                    $.alert('error',data.message);
                    return false;
                }
            }
        });
    });

    $("#community_name").change(function () {
	    var id = $("#community_name").val();

	    $("#building_name").html('<option value="0" data-num="0">请选择楼号</option>');
	    $("#dorm").html('<option value="0" data-num="0">请选择寝室</option>');

        var build = getParams(id);
        var options = [];
        if(Number(build) == 0){
            var option = '<option value="0" data-num="0">请选择楼号</option>';
            options.push(option);
        }else{
	        var option = '<option value="0" data-num="0">请选择楼号</option>';
	        options.push(option);
            $.each(build, function (index, node) {
                var option = '<option value="' + node.building_id+'" >' + node.building_name + '</option>';
                options.push(option);
            });
        }
        $("#building_name").html(options.join(''));
    });

    $("#building_name").change(function () {
	    var id = $("#building_name").val();

	    $("#dorm").html('<option value="0" data-num="0">请选择寝室</option>');

        var dorm = getDorm(id);
        var options = [];
        if(Number(dorm) == 0){
            var option = '<option value="0" data-num="0">请选择寝室</option>';
            options.push(option);
        }else{
	        var option = '<option value="0" data-num="0">请选择寝室</option>';
	        options.push(option);
            $.each(dorm, function (index, node) {
                var option = '<option value="' + node.dorm_id+'">' + node.dorm_name + '</option>';
                options.push(option);
            });
        }
        $("#dorm").html(options.join(''));
    });

    function getParams(id) {
        id = id ? id : 0;
        var result = null;
        $.ajax({
            url: "/base/dormCharge/getBuilding/wechat_id/{BEESCRM:$wechat_id}",
            type: "post",
            dataType: 'json',
            async: false,
            data: {
                id: id
            },
            success: function (data) {
                if (data.status == 'S') {
                    result = data.data;
                }
            }
        });
        return result;
    }

    function getDorm(id) {
        id = id ? id : 0;
        var result = null;
        $.ajax({
            url: "/base/dormCharge/getDormInfo/wechat_id/{BEESCRM:$wechat_id}",
            type: "post",
            dataType: 'json',
            async: false,
            data: {
                id: id
            },
            success: function (data) {
                if (data.status == 'S') {
                    result = data.data;
                }
            }
        });
        return result;
    }
</script>
</body>
</html>